<template>
   <a-modal v-model="visible"
    :maskClosable="false"
    :footer="null"
    :closable="false"
    @ok="handleOk"
    dialogClass="notice_work_dialog"
   >
        <div class="notice_work_header" slot="title">
            <div class="header_title">
                <a-button v-if="noticeRoute === 'workflowInstance'" type="primary" @click="saveForm" size="small">保存表单</a-button>
            </div>
            <div class="header_bts">
                <div v-if="noticeRoute === 'workflowApprove'">
                    <div v-if="approved === null">
                        <a-button  type="primary" @click="() => handleUpdateTask(true)" size="small">通过</a-button>
                        <a-button type="danger" @click="() => handleUpdateTask(false)" size="small">否决</a-button>
                    </div>
                    <div v-if="approved === true">
                        <span style="color: #4caf50">已通过</span>
                    </div>
                    <div v-if="approved === false">
                        <span style="color: #ee0000">已被否决</span>
                    </div>
                </div>
                
                <a-icon class="close" type="close" @click="$emit('cancel')"/>
            </div>
        </div>
        <div class="notice_work_body">
            <div class="body_detail">
                <div class="body_detail_form">
                    <div>
                        <v-form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef"></v-form-render>
                    </div>
                </div>
            </div>
            <div class="body_work"></div>
        </div>
    </a-modal>
</template>

<script>
import { getFormData } from "@/api/vForm.js"
import { updateRow, getRow  } from "@/api/worksheet.js"
import { getTaskDetail, updateWorkflowTask } from "@/api/app.js"
export default {
    props:{
        visible: Boolean,
        worksheetId: String,
        rowId: String,
        noticeRoute: String,
        taskId: String,
    },
    data(){
        return {
            tableName: '',
            formJson: {},
            formData: {},
            optionData: {},
            approved: null,
        }
    },
    async mounted(){
        if(this.noticeRoute === 'workflowInstance'){
            let result = await getFormData({id: this.worksheetId})
            let formData = await getRow({worksheetId: this.worksheetId, rowId: this.rowId})
            if(result){
                this.tableName = result.name
                if('config' in result){
                    let config = JSON.parse(result.config);
                    this.$refs.vFormRef.setFormJson(config)
                    this.$refs.vFormRef.setFormData(formData)
                }
            }
        } 
        else if (this.noticeRoute === 'workflowApprove'){
            let detail = await getTaskDetail(this.taskId)
            let {approveObject:{row: {worksheetId} , rowId}, approved } = detail
            let result = await getFormData({id: worksheetId})
            let formData = await getRow({worksheetId, rowId})
            this.approved = approved
            if(result){
                this.tableName = result.name
                if('config' in result){
                    let config = JSON.parse(result.config);
                    this.$refs.vFormRef.setFormJson(config)
                    this.$refs.vFormRef.setFormData(formData)
                }
            }
        }
    },
    methods:{
        async saveForm(){
            let formData = await this.$refs.vFormRef.getFormData();
            let result = await updateRow({worksheetId: this.worksheetId, data: formData, rowId: this.rowId})
            if(result){
                this.$message.success('修改成功！');
            } else {
                this.$message.error('修改失败！');
            }
        },
        async handleUpdateTask(approved){
            this.approved = approved
            let result = await updateWorkflowTask({
                id: this.taskId, 
                approved
            })
            if(result){
                this.$message.success('修改成功！');
            } else {
                this.$message.error('修改失败！');
            }
        },
    },
    computed:{

    }
}
</script>

<style lang="less">
.notice_work_dialog{
    min-width: 900px;
    max-width: 1600px;
    width: 95% !important;
    top: 3%;
    height: 96%;
    .ant-modal-content{
        height: 100%;
        display: flex;
        flex-direction: column;

        .ant-modal-header{
            padding: 0 20px;

            .notice_work_header{
                height: 50px;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .header_title{

                }
                .header_bts{
                    display: flex;
                    align-items: center;

                    .close{
                        color: #999;
                        margin-left: 20px;
                    }
                }
            }

        }

        .ant-modal-body{
            padding: 0;
            flex: 1 1 auto;

            .notice_work_body{
                height: 100%;
                display: flex;

                .body_detail{
                    flex: 1 1 auto;
                    position: relative;
                    
                    .body_detail_form{
                        height: 100%;
                        width: 100%;
                        padding: 10px 20px;
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        overflow: hidden;
                        overflow-y: auto;
                    }
                }
                .body_work{
                    width: 450px;
                    position: relative;
                    background: #fafafa;
                    border-left: 1px solid #ddd;
                }
            }
        }
    }
}
</style>